<template>
  <div>
    <cascader :data="data" :exist="exist" @outputValue="outputValue"></cascader>
    {{value}}
  </div>
</template>

<script>
import cascader from "./encapsulation/cascader";
export default {
  data() {
    return {
      data: {
        children: [
          { name: "浙江省", value: "zhejiangsheng" },
          {
            name: "江苏省",
            value: "jiangsusheng",
            children: [
              {
                name: "徐州市",
                value: "xuzhoushi",
                children: [
                  {
                    name: "泉山区",
                    value: "quanshanqu",
                    children: [
                      {
                        name: "金山街道",
                        value: "jinshanjiedao",
                        children: [
                          {
                            name: "金山小学",
                            value: "jinshanxiaoxue",
                            children: [
                              {
                                name: "三年级",
                                value: "sannianji",
                                children: [
                                  {
                                    name: "二班",
                                    value: "erban",
                                    children: [
                                      {
                                        name: "一组",
                                        value: "yizu",
                                        children: [
                                          {
                                            name: "三排",
                                            value: "sanpai",
                                            children: [
                                              {
                                                name: "五号",
                                                value: "wuhao"
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            name: "泰山小学",
                            value: "taishanxiaoxue"
                          }
                        ]
                      }
                    ]
                  },
                  { name: "云龙区", value: "yunlongqu" }
                ]
              }
            ]
          }
          
        ]
      },
      value: [],
      exist: ["zhejiangsheng", "xuzhoushi"]
    };
  },
  components: {
    cascader: cascader
  },
  methods: {
    outputValue(v) {
      this.value = v;
    }
  }
};
</script>

<style>
</style>